<template>
  <div class="group-manage">
    <div class="manage-header" style="margin-bottom: 30px;">

      <el-button @click="getReportList()" type="primary" size="small">
        刷新报表列表
      </el-button>
      <span style="margin-left: 30px">报表类型：</span>

      <el-select v-model="value" placeholder="请选择">
        <el-option
            v-for="item in reportTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="searchValue" placeholder="请输入想要搜索的内容" style="width: 200px; margin-left: 30px; margin-right: 10px;"
                size="small" clearable/>
      <el-button @click="getReportList()" type="primary" size="small">
        搜索
      </el-button>

    </div>

    <!-- user-namage 高度设置为90%了，这里把table设置为它的90% -->
    <el-table height="90%" :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="id" width="180">
        <template slot-scope="scope">
          <div v-html="scope.row.id"></div>
        </template>
      </el-table-column>
      <el-table-column prop="fileName" label="文件名称" width="180">
        <template slot-scope="scope">
          <div v-html="scope.row.fileName"></div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="导出状态" width="180">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.status === '1'" style="color: green;">成功</span>
            <span v-else-if="scope.row.status === '2'" style="color: red;">失败</span>
            <span v-else-if="scope.row.status === '3'"  style="color: orange;">导出中</span>
            <span v-else>未知状态</span> <!-- 可选：处理其他可能的状态 -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="reportTypeLv1" label="一级分类" width="180">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.reportTypeLv1 === '1'">用户</span>
            <span v-else-if="scope.row.reportTypeLv1 === '2'">帖子</span>
            <span v-else>未知分类</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="reportTypeLv2" label="二级分类" width="180">
        <template slot-scope="scope">
          <div v-html="scope.row.reportTypeLv2"></div>
        </template>
      </el-table-column>
      <el-table-column prop="opUserName" label="导出人" width="180">
        <template slot-scope="scope">
          <div v-html="scope.row.opUserName"></div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="导出时间" width="180">
        <template slot-scope="scope">
          <div v-html="scope.row.createTime"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="downloadReport(scope.row.fileId)" size="small" type="primary">
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 固定在底部-->
    <div class="block" style="position: fixed; bottom: 0; width: 100%;">
      <el-pagination background layout="prev, pager, next" :total="totalCount" @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import requestUtil from '../../network/request'

export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      currentPage: 1, // 当前页
      pageSize: 10, // 页大小
      totalPage: 1,
      totalCount: 0,
      searchValue: '',
      reportTypes: [{
        value: '',
        label: '全部'
      },{
        value: '1',
        label: '用户报表'
      }, {
        value: '2',
        label: '帖子报表'
      }],
      value: ''
    };
  },
  methods: {
    getReportList() {
      requestUtil.post('/report/list', {
        page: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.code === '0') {
          const list = res.result
          // 确保 id 是字符串
          this.tableData = list.map(item => ({
            ...item,
            id: item.id.toString()
          }));
          this.totalCount = res.page ? res.page.totalCount : 0
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    downloadReport(fileId) {
      requestUtil.download('/report/download',
          { fileId: fileId }
      )
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage
      this.getReportList()
    }
  },
  mounted() {
    this.getReportList()
  }
};
</script>

<style lang="less" scoped>
.group-manage {
  height: 90%;
}
</style>